<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
        <div class="contentView">
            <JsTable :toolBar="toolBar" :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh">
                <template #search-last>
                    <el-button @click="reset" type="primary" size="small">重置</el-button>
                </template>
            </JsTable>
        </div>
        <el-dialog v-model="state.detailDialogVisible" title="图书详情信息" width="500">
            <el-descriptions>
                <el-descriptions-item label="图书简介">{{ state.form.synopsis }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.detailDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="state.detailDialogVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="state.editDialogVisible" title="编辑图书信息" width="500" :before-close="editHandleClose">
            <el-form :model="state.form" ref="editFormRuleRef" :rules="state.editFormRules" label-width="auto"
                style="max-width: 600px">
                <el-form-item label="书名" prop="name">
                    <el-input v-model="state.form.name" />
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="state.form.author" />
                </el-form-item>
                <el-form-item label="简介" prop="synopsis">
                    <el-input v-model="state.form.synopsis" />
                </el-form-item>
                <el-form-item label="出版日期" prop="year_publication">
                    <el-input v-model="state.form.year_publication" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitEditForm">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="state.deleteDialogVisible" title="确认图书下架信息" width="500">
            <el-descriptions>
                <el-descriptions-item label="书名">{{ state.form.name }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="作者">{{ state.form.author }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="出版日期">{{ state.form.year_publication }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.deleteDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="deleteSubmit">
                        图书下架
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="state.addDialogVisible" title="图书信息填写" width="500" :before-close="addHandleClose">
            <el-form :model="state.form" ref="addFormRuleRef" :rules="state.addFormRules" label-width="auto"
                style="max-width: 600px">
                <el-form-item label="书名" prop="name">
                    <el-input v-model="state.form.name" />
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="state.form.author" />
                </el-form-item>
                <el-form-item label="简介" prop="synopsis">
                    <el-input v-model="state.form.synopsis" />
                </el-form-item>
                <el-form-item label="出版日期" prop="year_publication">
                    <el-input v-model="state.form.year_publication" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitAddForm">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue"
import { ref } from "vue"
import { booksList, bookEdit, bookDelete, bookAdd } from '@/api/manage'
import { ElMessage, FormInstance, FormRules } from "element-plus";

// 重置
const reset = () => {
    toolBar.value.form.author = ''
    toolBar.value.form.bookName = ''
    search()
}
// 查询
const search = () => {
    booksList(toolBar.value.form).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.dataSource.map((item: any) => {
            if (item.borrowed) {
                item.borrowState = '借阅中'
            } else {
                item.borrowState = '未借阅'
            }
        })
        state.value.totalCount = res.data.total
    })
}
// 不编辑
const editHandleClose = () => {
    state.value.editDialogVisible = false;
    editFormRuleRef.value?.resetFields()
}
// 编辑
const submitEditForm = () => {
    if (!editFormRuleRef.value) {
        return console.log('没有获得表单实例对象！')
    }
    editFormRuleRef.value.validate((valid, fields) => {
        if (valid) {
            state.value.form.updated_at = new Date().toISOString().replace(/\.[\d]{3}Z$/, 'Z')
            bookEdit(state.value.form).then((res: any) => {
                if (res.code === 0) {
                    ElMessage({
                        message: '图书编辑成功',
                        type: 'success',
                    })
                    search()
                }
                else {
                    ElMessage({
                        message: '图书编辑失败',
                        type: 'error'
                    })
                }
            })
        } else {
            console.log(fields)
        }
    }).then(() => {
        state.value.editDialogVisible = false;
    });
}
// 上架
const add = () => {
    state.value.form.id = -1
    state.value.author = ''
    state.value.name = ''
    state.value.synopsis = ''
    state.value.year_publication = ''
    state.value.addDialogVisible = true;
}
// 不新增
const addHandleClose = () => {
    state.value.addDialogVisible = false;
    addFormRuleRef.value?.resetFields()
}
// 新增
const submitAddForm = () => {
    if (!addFormRuleRef.value) {
        return console.log('没有获得表单实例对象！')
    }
    addFormRuleRef.value.validate((valid, fields) => {
        if (valid) {
            delete state.value.form.id
            state.value.form.updated_at = new Date().toISOString().replace(/\.[\d]{3}Z$/, 'Z')
            bookAdd(state.value.form).then((res: any) => {
                if (res.code === 0) {
                    ElMessage({
                        message: '图书上架成功',
                        type: 'success',
                    })
                    search()
                }
                else {
                    ElMessage({
                        message: '图书上架失败',
                        type: 'error'
                    })
                }
            })
        } else {
            console.log(fields)
        }
    }).then(() => {
        state.value.addDialogVisible = false;
    }).finally(() => {
        state.value.form.id = -1
    });
}
// 图书下架
const deleteSubmit = () => {
    bookDelete(state.value.form.id).then((res: any) => {
        if (res.code === 0) {
            ElMessage({
                message: '图书图书下架成功',
                type: 'success',
            })
            search()
        } else {
            ElMessage({
                message: '图书图书下架失败',
                type: 'error'
            })
        }
    })
    state.value.deleteDialogVisible = false;
}

const editFormRuleRef = ref<FormInstance>()
const addFormRuleRef = ref<FormInstance>()
const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '图书借阅',
    form: {
        id: -1,
        author: '',
        name: '',
        synopsis: '',
        year_publication: '',
        created_at: new Date().toISOString().replace(/\.[\d]{3}Z$/, 'Z'),
        updated_at: '',
    },
    editFormRules: ref<FormRules>({
        author: [{ required: true, trigger: 'blur', message: '作者不能为空!' }],
        name: [{ required: true, trigger: 'blur', message: '书名不能为空!' }],
        synopsis: [{ required: true, trigger: 'blur', message: '简介不能为空!' }],
        year_publication: [{ required: true, trigger: 'blur', message: '出版日期不能为空!' }],
    }),
    addFormRules: ref<FormRules>({
        author: [{ required: true, trigger: 'blur', message: '作者不能为空!' }],
        name: [{ required: true, trigger: 'blur', message: '书名不能为空!' }],
        synopsis: [{ required: true, trigger: 'blur', message: '简介不能为空!' }],
        year_publication: [{ required: true, trigger: 'blur', message: '出版日期不能为空!' }],
    }),
    editDialogVisible: false,
    detailDialogVisible: false,
    deleteDialogVisible: false,
    addDialogVisible: false,
    columns: {
        props: [
            {
                name: '书名',
                key: 'name',
            },
            {
                name: '作者',
                key: 'author',
            },
            {
                name: '出版日期',
                key: 'year_publication',
            },
            {
                name: '借阅状态',
                key: 'borrowState',
            },
        ],
        options: {
            width: 250,
            btns: [
                {
                    label: '编辑',
                    key: 'edit',
                    type: 'warning',
                    event: (params: any) => {
                        state.value.form.id = params.id
                        state.value.form.author = params.author
                        state.value.form.name = params.name
                        state.value.form.synopsis = params.synopsis
                        state.value.form.year_publication = params.year_publication
                        state.value.editDialogVisible = true;
                    }
                },
                {
                    label: '详情',
                    key: 'reset',
                    event: (params: any) => {
                        state.value.form.synopsis = params.synopsis
                        state.value.detailDialogVisible = true;
                    }
                },
                {
                    label: '图书下架',
                    key: 'delete',
                    type: 'danger',
                    event: (params: any) => {
                        state.value.form.id = params.id
                        state.value.form.author = params.author
                        state.value.form.name = params.name
                        state.value.form.year_publication = params.year_publication
                        state.value.deleteDialogVisible = true;
                    }
                },
            ],
        },
    },
    dataSource: [],
    tableEvent: {},
} as any)

const toolBar = ref<any>({
    form: {
        author: '',
        bookName: '',
    },
    input: [
        {
            label: '书名',
            key: 'bookName',
            placeholder: '请输入',
            el: 'input',
        },
        {
            label: '作者',
            key: 'author',
            placeholder: '请输入',
            el: 'input',
        },
    ],
    btns: [
        {
            label: '查询',
            icon: 'Search',
            event: search
        },
        {
            label: '重置',
            event: reset
        },
        {
            label: '上架图书',
            event: add
        }
    ],
})

onMounted(() => {
    search()
})
</script>

<style lang="scss" scoped>
*::-webkit-scrollbar {
    display: none;
    width: 10px;
}

.box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>